<script setup lang="ts">
defineOptions({
  name: "Contact"
});

const openUrl = url => {
  window.open(url);
};
</script>
<template>
  <div>
    <div class="contact">
      <div class="title">聯絡資訊</div>
      <div class="content">
        <div>文美心講師</div>
        <div>電郵: Msman@eduhk.hk</div>
        <div>Whatsapp: 29487170</div>
      </div>
      <div class="footer">
        <div
          class="btn"
          @click="
            openUrl(
              'https://www.eduhk.hk/ses/web/staff_detail.php?id=58&name=msman&lang=tc'
            )
          "
        >
          <img src="@/assets/Group.png" width="35" height="26" />
          <div class="ml-3">電郵</div>
        </div>
        <div class="btn" @click="openUrl('https://wa.me/29487170')">
          <img src="@/assets/whatsapp.png" width="44" height="43" />
          <div class="ml-3">Whatsapp</div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.contact {
  width: 580px;
  font-weight: bold;
  margin-bottom: 100px;
  .title {
    font-size: 64px;
    margin-bottom: 15px;
    text-align: center;
  }
  .content {
    font-size: 32px;
    line-height: 75px;
    padding: 0 50px;
    margin-bottom: 30px;
  }
  .footer {
    color: #9dbdba;
    display: flex;
    justify-content: space-between;
    .btn {
      width: 196px;
      height: 62px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid #9dbdba;
      border-radius: 8px;
      cursor: pointer;
    }
  }
}
</style>
